<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,
        width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>对话框和弹窗</title>
    <!-- <link rel="stylesheet" href="../../css/reset.css"> -->
    <style>
        button {
            outline: none;
        }

        body {
            font-size: 0.28rem;
        }

        .dialog4 {
            background-color: white;
            border-radius: 0.08rem;
            padding: .3rem .1rem;
            width: 54%;
        }

        .dialog4>.text {
            width: 100%;
            text-align: center;
            color: gray;
        }

        .progress-w {
            width: 100%;
            margin-bottom: .1rem;
        }

        .progress-w #progressBack {
            width: 100%;
            height: 0.08rem;
            background-color: #eee;
            border-radius: 0.04rem;
        }

        .progress-w #progress {
            width: 0%;
            height: 0.08rem;
            background-color: #5474ff;
            border-radius: 0.08rem;
        }
    </style>
    <!-- <link rel="stylesheet" href="../../css/dialog.css"> -->
</head>

<body style="position: relative;">
    <div class="dialog1" style="display: block;background: #fff;
position: fixed;top:35%;height: auto;width:70%;left:15%;text-align: center; border-radius: 0.08rem;
    padding: 0.3rem 0.1rem;">
        <p class="text text1" style="color:#333;font-size: 0.32rem;padding:0.15rem 0;"></p>
        <div class="btns ">
            <button class="cancelBtn" style="border:0;background: none;font-size: 0.3rem;margin-top:0.4rem;
                 color:#333;padding:0.3rem 0.5rem;display: none;">取消</button>
            <button class="downloadBtn" style="border:0;background: none;font-size: 0.32rem;margin-top:0.4rem;
            color:#ffd203;padding:0.3rem 0.5rem;display: inline-block">立即下载</button>
        </div>
    </div>
    <div class="dialog4" style="display: none;position: fixed;top:40%;left:23%;">
        <div class="progress-w">
            <div id="progressBack">
                <div id="progress"></div>
            </div>
        </div>
        <p class="text">正在下载...</p>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        app.toFront("downloadApk");
        var param = api.pageParam;
        if (!param.data) {
            return;
        }
        $(".text1").text(param.data.text);
        $(".downloadBtn").click(function () {
            $(".dialog1").hide();
            $(".dialog4").show();
            app.trigger('update', {
                url: param.data.extra.url
            });
        });
        console.log("进去下载页面进去下载页面进去下载页面+++++++++++++++++++++++++++++++++")
        if (param.data.btns.length > 1) {
            $(".cancelBtn").css('display', 'inline-block')
        }
        $(".cancelBtn").click(function () {
            app.closeF('downloadApk');
        })
        // 监听进度条进度更新
        app.listen("update_progress", function (ret, err) {
            if (ret.value.state == 0) {
                $("#progress").css("width", ret.value.percent + "%");
                return;
            }
            if (ret.value.state == 1) {
                $("#progress").css("width", ret.value.percent + "%");
                $(".dialog4 .text").text("下载完成！");
                return;
            }
            if (ret.value.state != 0 && ret.value.state != 1) {
                $("#progress").css("width", ret.value.percent + "%");
                $(".dialog4 .text").text("下载失败！");
            }
        });
    }
</script>